<template>
  <div class="filter-item">
    <label class="filter-label">{{ label }}</label>
    <select 
      :value="modelValue"
      @change="$emit('update:modelValue', $event.target.value); $emit('change', $event.target.value)"
      class="filter-select"
    >
      <option value="">{{ placeholder }}</option>
      <option 
        v-for="opt in formattedOptions" 
        :key="opt.value" 
        :value="opt.value"
      >
        {{ opt.label }}
      </option>
    </select>
  </div>
</template>

<script>
export default {
  name: 'CommonSelector',
  props: {
    modelValue: [String, null],
    label: {
      type: String,
      required: true
    },
    placeholder: {
      type: String,
      default: '请选择'
    },
    options: {
      type: Array,
      required: true
    }
  },
  emits: ['update:modelValue', 'change'],
  computed: {
    formattedOptions() {
      return this.options.map(option => {
        if (typeof option === 'string') {
          return { label: option, value: option };
        }
        return {
          label: option.label || option.toString(),
          value: option.value || option
        };
      });
    }
  }
}
</script>

<style scoped>
.filter-item {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.filter-label {
  font-weight: 600;
  color: #333;
  font-size: 0.9rem;
  margin-bottom: 0.3rem;
}

.filter-select {
  padding: 0.8rem 1rem;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  font-size: 0.95rem;
  background: white;
  transition: all 0.3s ease;
  outline: none;
  width: 100%;
}

.filter-select:focus {
  border-color: #4CAF50;
  box-shadow: 0 0 0 3px rgba(76, 175, 80, 0.1);
}
</style>